<template>
	<div class="xuexiziliao">
		<el-card>
			<el-button @click="open" type="primary">添加</el-button>
			<template>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="title" label="资料名称" width="180"> </el-table-column>
					<el-table-column prop="description" label="资料描述" width="180"> </el-table-column>
					<el-table-column prop="fileUrl" label="文件地址">
						<template slot-scope="scope">
							<a :href="httpResources(scope.row.fileUrl)" target="_blank" rel="noopener noreferrer">
								{{ httpResources(scope.row.fileUrl) }}
							</a>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</el-card>
		<el-dialog title="学习资料" :visible.sync="dialogTableVisible">
			<el-form :model="form" :rules="rules" ref="ruleForm">
				<el-form-item label="资料名称" prop="title">
					<el-input v-model="form.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="资料描述" prop="description">
					<el-input v-model="form.description" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="上传资料" prop="fileUrl">
					<el-upload
						accept=".doc,.xls,.ppt,.pdf,.docx,.xlsx,.pptx"
						:on-success="handleAvatarSuccess"
						class="upload-demo"
						ref="upload"
						action="/admin/upload"
						:auto-upload="false"
					>
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { createZL, findAll, updateZL, deleteZL } from '../../api/xuexiziliao/index.js';
import { httpResources } from '../../utils/toolsValidate.js';
export default {
	data() {
		return {
			dialogTableVisible: false,
			form: {
				title: '',
				description: '',
				fileUrl: '',
			},
			rules: {
				title: [{ required: true, message: '请输入资料名称', trigger: 'blur' }],
				description: [{ required: true, message: '请输入资料描述', trigger: 'blur' }],
				fileUrl: [
					{
						validator: (rule, value, callback) => {
							if (!this.form.fileUrl) {
								callback(new Error('请上传文件'));
							} else {
								callback();
							}
						},
						trigger: 'blur',
					},
				],
			},
			tableData: [],
		};
	},
	methods: {
		open() {
			this.form = {
				title: '',
				description: '',
				fileUrl: '',
			};
			this.dialogTableVisible = true;
		},
		submitUpload() {
			this.$refs.upload.submit();
		},
		handleAvatarSuccess(value) {
			this.form.fileUrl = value?.data?.path || '';
		},
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					const fn = this.form.id ? updateZL : createZL;
					fn({
						title: this.form.title,
						description: this.form.description,
						fileUrl: this.form.fileUrl,
						id: this.form.id,
					}).then(() => {
						this.$message.success('添加成功');
						this.dialogTableVisible = false;
						this.getList();
					});
				} else {
					return false;
				}
			});
		},
		httpResources(val) {
			return httpResources(val);
		},
		getList() {
			findAll().then((res) => {
				this.tableData = res.data || [];
			});
		},
		handleEdit(row) {
			this.form = { ...row };
			this.dialogTableVisible = true;
		},
		handleDelete(row) {
			deleteZL({ id: row.id });
			this.getList();
		},
	},
	mounted() {
		this.getList();
	},
};
</script>
